<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Reports</title>
	<%@ include file="../jsp/shared/header.jsp" %>
	<link rel="stylesheet" type="text/css" href="<%=scriptPageContext %>/static/styles/bootstrap.css" />
	
	<script type="text/javascript" src="<%=scriptPageContext %>/static/js/survey/graphics-report.js"></script>
	<script>
    	var answersDto = JSON.parse('<%=request.getAttribute("answers")%>');
    	var optionsDto = JSON.parse('<%=request.getAttribute("options")%>');
    	$(document).ready(function() {
		    var surveyViewModel = { answers: answersDto };
		    ko.applyBindings(surveyViewModel, $("#report-container")[0]);
		});
    </script>
</head>
<body class="report">
	<div class="container" id="report-container">
		<h1>Resultados de la encuesta</h1>
		<table class="table table-striped table-bordered table-condensed">
			<thead>
				<tr>
					<th>Respuesta</th>
					<th>Nombre</th>
					<th>Apellido</th>
				</tr>
			</thead>
			<tbody data-bind="foreach: answers">
				<tr>
					<td data-bind="text: option.description"></td>
					<td data-bind="text: user.name"></td>
					<td data-bind="text: user.surname"></td>
				</tr>
			</tbody>
		</table>
			<h1>Graficos</h1>
    		<div id="chart_div"></div>
	
	</div>
</body>
</html>